<template>
  <!-- 大版心 -->
  <div class="topbar">
    <!-- 小版心 -->
    <div class="wrap topbar1">
      <!-- 左边的 -->
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <!-- 右边的导航 -->
      <ul class="right">
        <li>
          <img :src="userInfo.headImg" width="23px" height="22px" border-radius="13px" alt="" />
        </li>
        <li>用户名：{{ userInfo.nickName }}</li>
        <li>我的积分:{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="login-btn" v-if="!isLoginSattus" @click="changeisShowLoginModal(true)">登录</li>
        <li class="cart-btn" v-else>
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }}</strong>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { mapMutations, mapState, mapActions } from 'vuex'
import { WeixinLoginApi } from '@/request/api'

export default {
  data() {
    return {
      /*   cartTotal: 10 */
    }
  },
  computed: {
    ...mapState({
      isLoginSattus: (state) => state.loginStatus.isLoginSattus,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo
    })
  },
  methods: {
    ...mapMutations({
      /*框  */
      changeisShowLoginModal: 'showLoginModal/changeisShowLoginModal',
      /*按钮  */
      changeisLoginStatusModal: 'loginStatus/changeisLoginStatusModal',
      /* 修改用户的信息 */
      updateUserInfo: 'userInfo/updateUserInfo',
      /* 初始化信息 */
      initUserInfo: 'userInfo/initUserInfo'
    }),
    ...mapActions({
      asyncisToastStatusModal: 'toastShow/asyncisToastStatusModal',
      //得到后台的用户信息
      asyncChangeUserInfo: 'userInfo/asyncChangeUserInfo'
    })
  },
  /* 项目打开，页面刷新  */
  /* 微信扫码后，页面自动刷新，现时地扯栏中携带一个code的参数 */
  async created() {
    console.log('扫码了')
    let code = this.$route.query.code
    /* 如果有code 就去找微信平台要数据  */
    if (code) {
      let res = await WeixinLoginApi({
        code
      })
      /* 有三种状态
      code ==0  成功
    */
      console.log('微信登录后的res', res)
      if (res.data.code == 0) {
        this.asyncisToastStatusModal({
          isshow: true,
          msg: '成功',
          type: 'success'
        })
        /* 存上token */
        localStorage.setItem('x-auth-token', res.data['x-auth-token'])
        /* 登录按钮改为购物车 */
        this.changeisLoginStatusModal(true)
        /* 清除地扯栏中的code */
        this.$route.query.code && this.$router.push(this.$route.path)
        /* 登录成功就要有数据 出来 */
        this.asyncChangeUserInfo()
      } else if (res.data.code == 400) {
        this.asyncisToastStatusModal({
          isshow: true,
          msg: '不成功',
          type: 'success'
        })
      } else if (res.data.code == 407) {
        this.changeisShowLoginModal(true)
        localStorage.setItem('uuid', res.data.uuid)
      }
    } else {
      /* 判断是否有token值  */
      let token = localStorage.getItem('x-auth-token')
      this.changeisLoginStatusModal(Boolean(token))
      /* 正常手机号登录也要获取用户信息 */
      if (token) {
        this.asyncChangeUserInfo()
      } else {
        this.initUserInfo() //用户信息初始化.vuex (刷新页面和切换导航)
      }
    }
  }
}
</script>
 
<style lang = "less" scoped>
.topbar {
  width: 1920px;
  height: 40px;
  line-height: 40px;
  background: #242b39;
  color: #fff;

  .topbar1 {
    display: flex;
    justify-content: space-between;
  }
  .right {
    .cart-btn {
      width: 124px;
      height: 40px;
      background: #0a328e;
      text-align: center;
      img {
        width: 20px;
        height: 19px;
        vertical-align: middle;
      }
      span {
        margin: 0 8px;
      }
      strong {
        width: 22px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        border-radius: 50%;
        background-color: #fd604d;
      }
    }
    display: flex;
    align-items: center;
    li {
      margin-left: 20px;
      padding: 0px 10px;
      cursor: pointer;
    }
    li:hover {
      color: #f40;
    }
    .login-btn {
      width: 124px;
      height: 40px;
      background: #0a328e;
      text-align: center;
    }
  }
}
</style>